<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 17:35:06
 * @LastEditTime : 2020-02-20 16:14:20
 * @LastEditors  : Please set LastEditors
-->
<template>
  <div>
      <!-- <div class="header">
          <div class="leftP lf" style="font-size:16px;margin-left:15px">project:<span class="projectName">{{projectName}}</span></div>
          <div class="rightU rt">
              <span class="userName">{{userName}}</span>
              <img src="../../assets/userss.png" alt="" class="img_user">
          </div>
      </div> -->
      <div class="headerBtn1">
        <Button type="primary" ghost @click="BatchUser" style="margin-bottom: 10px;margin-right:15px">批量下发用户数据</Button>
          <Poptip
                  v-if="batch"
                  confirm
                  title="确认将选中的机器开机吗?"
                  @on-ok="batchOnOff(1)"
                  transfer>
              <Button type='primary'
                      ghost
                      :disabled="disabledAllBtn"
                      style="margin-right:15px;margin-bottom: 10px;">批量开机</Button>
          </Poptip>
          <Poptip
                  v-if="batch"
                  confirm
                  title="确认将选中的机器关机吗?"
                  @on-ok="batchOnOff(0)"
                  transfer>
              <Button type='primary'
                      ghost
                      :disabled="disabledAllBtn"
                      style="margin-right:15px;margin-bottom: 10px;">批量关机</Button>
          </Poptip>
          <!--<Button type="primary"  ghost style="position:relative;z-index:55" @click="opeartionManyVm">批量操作虚拟机</Button>-->
          <Select filterable  v-model="virtualSystypeOfReach" filterable  style="width:150px; margin-right: 15px;margin-bottom: 10px;" clearable
                   placeholder="请选择操作系统类型"
                   @on-change="vmCurrentPage=1;getVmListManage()" >
              <Option value="linux">Linux</Option>
              <Option value="windows">Windows</Option>
              <Option value="mac">Mac</Option>
              <Option value="unix">Unix</Option>
          </Select>
          <Select filterable  v-model="virtualvmTypeOfReach" filterable  style="width:150px;margin-right:15px;margin-bottom: 10px;" clearable placeholder="请选择虚拟机类型" @on-change="vmCurrentPage=1;getVmListManage()" >
              <Option value="VM">VM</Option>
              <Option value="SERVER">SERVER</Option>
              <Option value="CLIENT">CLIENT</Option>
              <Option value="DRT">DRT</Option>
              <Option value="IDS">IDS</Option>
              <Option value="DES">DES</Option>
              <Option value="WAF">WAF</Option>
              <Option value="FW">FIREWALL</Option>
              <Option value="PRT">PRT</Option>
              <Option value="TARGET">TARGET</Option>
              <Option value="TEST">TEST</Option>
              <Option value="FLAG">FLAG</Option>
          </Select>
          <Select filterable v-model="virtualNetworkIdOfReach" filterable  style="width:150px;margin-right:15px;margin-bottom: 10px;" clearable placeholder="请选择子网络"  @on-open-change="reachNetworkList"  @on-change="vmCurrentPage=1;getVmListManage()">
              <Option v-for="(item,index) in networkData" :key="index" :value="item.networkId" :title="item.networkName">{{item.networkName}}</Option>
          </Select>
          <Input  placeholder="请输入虚拟机名称" v-model="virtualNameOfReach"   @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <Input  placeholder="请输入IP"   v-model="virtualIPOfReach"    @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <Input  placeholder="请输入设备ID" v-model="equipmentId"   @on-change="vmCurrentPage=1;limitingReach()"
                  clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <Input  placeholder="请输入子网ID"   v-model="subnetId"    @on-change="vmCurrentPage=1;limitingReach()"
                  clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <!-- <Input suffix="ios-search" placeholder="Enter vmType"  v-model="virtualvmTypeOfReach"  @on-search="getVmListManage"  @on-change="getVmListManage" clearable @on-clear="getVmListManage" style="width: auto;position:relative;z-index:55"/> -->
          <Input  placeholder="请输入Mac地址"  v-model="virtualMacOfReach"    @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <Input  placeholder="请输入镜像名称"  v-model="virtualImageNameOfReach"    @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width:180px;margin-right:15px;margin-bottom: 10px;position:relative;z-index:55" v-show="controlSearchBtn"/>
          <!-- <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Cascader :data="vmAttributeData"    change-on-select @on-change="listenKeyChange" style="display:inline-block" placeholder="请选择key/value" @on-visible-change="getVmAttributeKey" v-show="controlSearchBtn"></Cascader>-->
  
          <!--<Select filterable v-model="virtualSubnetIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Subnet"  @on-open-change="reachSubnetList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
              <Option v-for="(item,index) in subnetData" :key="index" :value="item.id">{{item.name+'--'+item.cidr}}</Option>
          </Select>
          <Select filterable v-model="virtualSegmentIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Vlan"  @on-open-change="reachSegmentList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
              <Option v-for="(item,index) in segmentsData" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
          <Button type="primary" ghost @click="vmCurrentPage=1;getVmListManage()" style="position:relative;z-index:55;margin-left:15px;">搜索</Button>-->
          <Button type="dashed"  @click="controlSearch" :icon="controlSearchImage" style="margin-bottom: 10px;">{{controlSearchText}}</Button>
          <!-- <Button type="primary" @click="taskConfigerMess = true"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button> -->
      </div>
      <!-- <Card v-show="vmListDataTable.length ==  0" style="margin-top: -10px;"><p style="text-align:center;">没有查询到数据</p></Card> -->
      <Table 
        border 
        ref="selection1" 
        :columns="vmColumnsData" 
        :data="vmListDataTable"
        :show-header="true" 
        style="margin-top: -10px;"
        id="vmListTable"
        :height="tableHeight" 
        :loading="loadingTable" 
        @on-select-cancel="removeItem"
        @on-select-all-cancel="removeItem"
        @on-select="selectItem"
        @on-select-all="selectItem"></Table>
        <!-- @on-selection-change="selectTableData"  -->
    <Page :total="vmTotal" class="between-page" show-elevator :current="vmCurrentPage" :page-size="vmItemPage" :show-total= true   class-name="pageStyle1"  @on-change="switchineVmCurrentPage" @on-page-size-change="switchVmItemPage" :page-size-opts="pageItemGroup"/>
      <!-- 虚拟机元数据 -->
      <Modal
          v-model="vmMetadata"
          title="元数据"
          ok-canel = "关闭"
          ok-text = "确定"
          :loading = "vmMetadataLoading"
          @on-cancel="cancel"
          @on-ok="SaveMetaData"
          >
          <Tag type="dot"  color="primary" >虚拟机：{{vmName}}</Tag>
          <div v-for="(item,key) in metadataData" :key="key" style="margin:5px 0px;text-align:left;position:relative;width:101%">
              <Input placeholder="Enter key" style="width: 226px" v-model="item.key" clearable></Input>
              <Icon type="md-remove" />
              <Input placeholder="Enter value" style="width: 220px" v-model="item.value" clearable></Input>
              <Icon type="md-remove-circle" @click="removeMetadata(key)" :size="20" style="cursor:pointer"/>
          </div>
          <div >
              <Button icon="md-add" type="dashed" size="large" @click="handleAddMetadata" >添加元数据</Button>
          </div>
      </Modal>
      <!-- 批量操作虚拟机面板 -->
      <Modal v-model="vmManyPanel" width="371">
          <p slot="header" style="text-align:left">
              <span>共选择了{{vmManyNumber}}台虚拟机</span>
          </p>
          <div>
              <div>
                  <Poptip
                      v-for="(item,index) in btnData" :key="index"
                      confirm
                      title="您确定要执行此操作吗?"
                      @on-ok="okVm(item)"
                      @on-cancel="cancel">
                      <Button  type="primary" ghost style="margin:5px;">{{item}}</Button>
                  </Poptip>
              </div>
          </div>
          <div slot="footer">
              <Button type="primary" @click="vmManyPanel = false">关闭</Button>
          </div>
      </Modal>
      <!-- 端口转发列表 -->
      <Modal v-model="portListPanel" width="1200">
          <p slot="header" style="font-size:14px;text-align:left">
              <!-- <Icon type="ios-information-circle-outline"></Icon> -->
              <span>虚拟机：{{vmName}}</span>
          </p>
          <div style="text-align:center">
              <div style="text-align:left;margin-bottom:10px">
                  <Button type="primary" style="margin:5px;" @click="openPortPanel">开放端口</Button>
              </div>
              <Table border ref="selection" :columns="portTableCloums" :data="portTableData"  :stripe="true" :show-header="true" ></Table>
          </div>
          <div slot="footer">
              <Button type="primary" @click="portListPanel = false" >关闭</Button>
          </div>
      </Modal>
      <!-- 转发端口 -->
      <Modal
          v-model="openPort"
          title="添加"
          ok-canel = "关闭"
          ok-text = "确定"
          width="380"
          :loading = "addPortLoading"
          @on-cancel="cancel"
          @on-ok="addPort"
          >
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="类型" prop="type">
                  <RadioGroup v-model="formValidate.type" @on-change="listenTypeChange">
                      <Radio label="ssh"></Radio>
                      <Radio label="rdp"></Radio>
                      <Radio label="console">console</Radio>
                      <Radio label="other"></Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="other" prop="customType" v-if="disabledType">
                  <Input v-model.trim="formValidate.customType" style="width:200px" placeholder="请输入其他类型"></Input>
              </FormItem>
              <FormItem label="端口" prop="port">
                  <!-- <Input  type="number" min="1"  max="65535"  ></Input> -->
                  <input-number :min="1" :value="1" :max="65534" v-model="formValidate.port" style="width:200px"></input-number>
              </FormItem>
              <FormItem label="协议" prop="protocol">
                  <RadioGroup v-model="formValidate.protocol">
                      <Radio label="tcp">TCP</Radio>
                      <Radio label="udp" :disabled="disabledprototol">UDP</Radio>
                      <Radio label="icmp" :disabled="disabledprototol">ICMP</Radio>
                      <!-- <Radio label="all" :disabled="disabledprototol">ALL</Radio> -->
                  </RadioGroup>
              </FormItem>
          </Form>
          <!-- <Label>端口：</Label>
          <Input type="number"/>
          <Label>类型：</Label>
          <Select filterable>
              <Option>ssh</Option>
              <Option>rdp</Option>
              <Option>console</Option>
              <Option>console</Option>
          </Select> -->
      </Modal>
      <!-- 接入选择页面 -->
      <Modal
          v-model="selectDataPanel"
          title="选择接入的IP"
          ok-canel = "关闭"
          ok-text = "接入"
          width="380"
          :loading = "selectDataPanelLoading"
          @on-cancel="cancel"
          @on-ok="vmAccessChage"
      >
          <div>
              <RadioGroup  v-model="accessVmIp" v-for="(item,index) in selectDataGroup" :key="index" @on-change="changeIpAccess">
                  <Radio  :label="item.ip">{{item.ip}}</Radio>
              </RadioGroup>
          </div>
      </Modal>
      <!-- 页面loading -->
      <Spin fix v-show="isSpinShow">
          <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon>
          <div>Loading...</div>
      </Spin>
    <!--修改密码-->
    <Modal
          v-model="passwordModal.show"
          title="修改密码"
          width="380"
          :loading = "passwordModal.loading"
          @on-cancel="cancel"
          @on-ok="changePassword"
      >
          <div>
              密码：<Input v-model.trim="vmPassword" style="width:200px" placeholder="请输入密码"></Input>
          </div>
      </Modal>
      <Modal
          v-model="vmOpModal.show"
          title="操作虚拟机"
          width="380"
          @on-cancel="cancel"
          @on-ok="vmSwitchTypeOp"
      >
          <div style="font-size:14px;">
              {{vmOpModal.content}}
          </div>
      </Modal>
      <!-- <ToolModal ref="toolModal" :prjId="currentProjectId"></ToolModal> -->
      <!-- <Modal
          v-model="createVmConfigModal"
          title="扩展和收缩策略配置"
          ok-text = "确定"
          :loading =createVmConfigModalLoading
          :mask-closable="false"
  
          @on-ok="ok"
          @on-cancel="cancel">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改I/O优先级</span>
                  </Checkbox>
                  <RadioGroup v-model="formValidate.proto">
                      <Radio label="1">低</Radio>
                      <Radio label="2">中</Radio>
                      <Radio label="3">高</Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改启动优先级</span>
                  </Checkbox>
                  <Select filterable  v-model="virtualSystypeOfReach" filterable  style="width:180px;" clearable >
                      <Option value="linux">Linux</Option>
                      <Option value="windows">Windows</Option>
                      <Option value="mac">Mac</Option>
                      <Option value="unix">Unix</Option>
                  </Select>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改自动迁移</span>
                  </Checkbox>
                    <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改CPU调度优先级</span>
                  </Checkbox>
                  <RadioGroup v-model="formValidate.protocol">
                      <Radio label="tcp">低</Radio>
                      <Radio label="udp">中</Radio>
                      <Radio label="icmp">高</Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改CPU个数</span>
                  </Checkbox>
                  <InputNumber :max="10" :min="1" ></InputNumber>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改内存大小</span>
                  </Checkbox>
                  <InputNumber :max="10" :min="1" ></InputNumber>/MB
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改自动启动</span>
                  </Checkbox>
                   <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改启用console代理</span>
                  </Checkbox>
                   <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改tools自动升级</span>
                  </Checkbox>
                  <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem> -->
              <!-- <FormItem label="参数" style="width:380px;">
                  <Select filterable clearable>
                      <Option value="1">CPU利用率</Option>
                      <Option value="2">内存</Option>
                      <Option value="3">连接数</Option>
                      <Option value="4">磁盘IO</Option>
                  </Select>
              </FormItem>
              <FormItem label="" prop="" style="display:inline-block;margin-top:120px;"><span>小于</span><InputNumber :max="10" :min="1" ></InputNumber>%<span style="margin:0px 10px">收缩到</span><InputNumber :max="10" :min="1" ></InputNumber><span>个</span></FormItem>
              <FormItem label="" prop="" style="display:inline-block;">
                  <span>大于</span><InputNumber :max="10" :min="1" ></InputNumber>%<span style="margin:0px 10px">扩展到</span><InputNumber :max="10" :min="1" ></InputNumber><span>个</span>
              </FormItem> -->
          <!-- </Form>
      </Modal> -->
  </div>
  
  </template>
  
  <script>
  import {queryAllRange} from '@/api/drill_compete'
  import { executeScriptAgain } from '@/api/drill'
  import axios from '@/libs/axios1'
  import $ from 'jquery'
  import cookieUse from '@/libs/cookie.js'
  import { opVms } from '@/api/remote.js'
  import { getprojsubnetNodes } from '@/api/access_new.js'
  import { mapState } from 'vuex'
  import commonFun from '../mixin.js'
//   import ToolModal from './tool/toolModal.vue'
  import { encode } from '@/libs/utils'
  export default {
      name:'vmManagement',
      mixins:[commonFun],
    //   components:{ToolModal},
      computed: {
          ...mapState(['cloudType']),
      },
      props: {
          batch: {
              type: Boolean,
              default: false
          },
          disabledAllBtn: {
              type: Boolean,
              default: false
          }
      },
      data(){
          return {
              pageItemGroup:[10,20],
              isSpinShow:false,
              loadingTable:true,
              vmManyPanel:false,
              vmManyNumber:'',
              vmName:'',
              vmMetadata:false,
              vmMetadataLoading:true,
              metadataData:[
                  {
                      key:'',
                      value:''
                  },
              ],
              currentProjectId:'',
              projectName:'',
              userName:'',
              vmTotal:0,
              vmCurrentPage:1,
              vmItemPage:10,
              vmColumnsData:[
                  // {
                  //     type: 'expand',
                  //     width: 60,
                  //     align: 'center',
                  //     //  "fixed": "left",
                  //     render:(h,params)=>{
                  //         let _this = this;
                  //         params = params.row;
                  //         let addresses = [];
                  //         if(params.addresses){
                  //             if(params.addresses.length!=0){
                  //                 addresses = params.addresses.map((item)=>{
                  //                     return h('div',{
                  //                         style:{
                  //                             // borderBottom:'1px dotted #ddd',
                  //                             // paddingBottom:'10px'
                  //                         }
                  //                     },[
                  //                         h('Divider',{},'网络信息'),
                  //                         h('Span',{class:['expendSpanStyle']},[h('Label',{style:{display:'inline-block',minWidth:'50px',borderRadius:'5px',background:'#57a3f3',color:'#fff',textAlign:'center'}},'CIDR：'),item.cidr]),
                  //                         h('Span',{class:['expendSpanStyle']},'portId：'+item.id),
                  //                         h('Span',{class:['expendSpanStyle']},'IP：'+item.ip),
                  //                         h('Span',{class:['expendSpanStyle']},'Mac：'+item.mac),
                  //                         h('Span',{class:['expendSpanStyle']},'subnetId：'+item.subnetId),
                  //                         h('Span',{class:['expendSpanStyle']},'subnetOsId：'+item.subnetOsId),
                  //                         h('Span',{class:['expendSpanStyle']},'version：'+item.version),
                  //                         h('Span',{class:['expendSpanStyle']},'vlan：'+item.vlan)
                  //                     ])
  
                  //                     // return h()
                  //                 })
                  //             }
                  //         }
                  //         addresses.push(
                  //             h('div',{
                  //                 style:{
                  //                     // borderBottom:'1px dotted #ddd',
                  //                     // paddingBottom:'10px'
                  //                 }
                  //             },[
                  //                 h('Divider',{},'宿主机信息'),
                  //                 h('Span',{class:['expendSpanStyle']},'instance：'+params.instance),
                  //                 h('Span',{class:['expendSpanStyle']},'host：'+params.host),
                  //                 h('Span',{class:['expendSpanStyle']},'hostIp：'+params.hostIp),
                  //                 h('Span',{class:['expendSpanStyle']},'osId：'+params.osId),
                  //                 h('Span',{class:['expendSpanStyle']},'zone：'+params.zone),
                  //                 h('Span',{class:['expendSpanStyle']},'imageId：'+params.imageId),
                  //                 h('Span',{class:['expendSpanStyle']},'flavorId：'+params.flavorId)
                  //             ]),
                  //             h('div',{
                  //                 style:{
                  //                     // borderBottom:'1px dotted #ddd',
                  //                     // paddingBottom:'10px'
                  //                 }
                  //             },[
                  //                 h('Divider',{},'资源信息'),
                  //                 h('Span',{class:['expendSpanStyle']},'CPU：'+params.cpu),
                  //                 h('Span',{class:['expendSpanStyle']},'DISK：'+params.disk),
                  //                 h('Span',{class:['expendSpanStyle']},'RAM：'+params.ram),
                  //             ])
                  //         )
                  //         return h('div',{style:{textAlign:'left'}},addresses)
                  //     }
                 //  },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        "fixed": "left",
                    },
                  {
                      title:'设备ID',
                      key:'id',
                      align: 'center',
                      sortable: true,
                      minWidth:120,
                      "fixed": "left",
                      placement:'top-left'
                  },
                  {
                      title:'虚拟机名称',
                      key:'name',
                      align: 'center',
                      sortable: true,
                      minWidth:120,
                      "fixed": "left",
                      placement:'top-left'
                      // render:(h,params)=>{
                      // }
                  },
                  {
                      title:'子网络名称',
                      key:'networkName',
                      align: 'center',
                      // sortable: true,
                      minWidth:120,
                      "fixed": "left",
                      // render:(h,params)=>{
                      // }
                  },
                  {
                      title:'网络详细信息',
                      key:'',
                      align:'center',
                      // render:(h,params)=>{
  
                      // },
                      // minWidth:700,
                      children:[
                          {
                              title:'CIDR',
                              key:'',
                              align:'center',
                              minWidth:200,
                              render:(h,params)=>{
                                  let _this = this;
                                  // let k = 0;
                                  // _this.refreshIndex++;
                                  // if(_this.refreshIndex>_this.vmListDataTable.length){
                                  //     return;
                                  // }
                                  // if(this.refreshIndex>10){
                                  //     return
                                  // }
  
                                  params = params.row;
                                  let addresses = [];
                                  if(params.addresses){
                                      if(params.addresses.length!=0){
                                          addresses = params.addresses.map((item)=>{
                                            let cidr = item.ips.map(ip => {
                                              return h('div',{},ip.cidr);
                                            })
                                              return h('div',{},cidr);
                                          })
                                      }
                                  }
                                   return h('div',{},addresses)
                              }
                          },
                          {
                              title:'IP',
                              key:'',
                              align:'center',
                              sortable: true,
                              minWidth:200,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let addresses = [];
                                  if(params.addresses){
                                      if(params.addresses.length!=0){
                                          addresses = params.addresses.map((item)=>{
  //                                          return h('div',{},item.ip);
                                              let ips = item.ips.map(ip => {
                                                  return h('div',{},ip.ipAddress);
                                              })
                                              return h('div',{},ips);
                                          })
                                          return h('div',{},addresses)
                                      }
                                  }
                              }
                          },
                          {
                              title:'子网ID',
                              key:'',
                              align:'center',
                              sortable: true,
                              minWidth:200,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let submitId = [];
                                  if(params.addresses){
                                      if(params.addresses.length!=0){
                                          submitId = params.addresses.map((item)=>{
  //                                          return h('div',{},item.ip);
                                              let subnetIds = item.ips.map(ip => {
                                                  return h('div',{},ip.subnetId);
                                              })
                                              return h('div',{},subnetIds);
                                          })
                                          return h('div',{},submitId)
                                      }
                                  }
                              }
                          },
                          {
                              title:'Mac地址',
                              key:'',
                              align:'center',
                              minWidth:200,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let addresses = [];
                                  if(params.addresses){
                                      if(params.addresses.length!=0){
                                          addresses = params.addresses.map((item)=>{
                                              return h('div',{},item.macAddress);
                                          })
                                          return h('div',{},addresses)
                                      }
                                  }
                              }
                          },
                          {
                              title:'IP 版本',
                              key:'',
                              align:'center',
                              minWidth:200,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let addresses = [];
                                  if(params.addresses){
                                      if(params.addresses.length!=0){
                                          addresses = params.addresses.map((item)=>{
  //                                          return h('div',{},item.version);
                                              let ipVersion = item.ips.map(ip => {
                                              return h('div',{},ip.ipVersion);
                                            })
                                              return h('div',{},ipVersion);
                                          })
                                          return h('div',{},addresses)
                                      }
                                  }
                              }
                          }
                      ]
                  },
                  {
                      title:'接入信息',
                      key:'AccessInformation',
                      align: 'center',
                      minWidth:600,
                      children:[
                          {
                              title: '用户名',
                              key: 'ausernamege',
                              align: 'center',
                              minWidth:150,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let userNameGroup = [];
                                  // params.accesses.push('gggg')
                                  if(params.accesses){
                                      if(params.accesses.length!=0){
                                          userNameGroup = params.accesses.map((item)=>{
                                              return h('div',{},item.username)
                                          })
                                      }
                                  }
                                  return h('div',{},userNameGroup)
                              }
                          },
                          {
                              title: '密码',
                              key: 'password',
                              align: 'center',
                              minWidth:150,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let userNameGroup = [];
                                  if(params.accesses){
                                      if(params.accesses.length!=0){
                                          userNameGroup = params.accesses.map((item)=>{
                                              return h('div',{},item.password)
                                          })
                                      }
                                  }
                                  return h('div',{},userNameGroup)
                              }
                          },
                          {
                              title: '接入类型',
                              key: 'accessType',
                              align: 'center',
                              minWidth:150,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let userNameGroup = [];
                                  if(params.accesses){
                                      if(params.accesses.length!=0){
                                          userNameGroup = params.accesses.map((item)=>{
                                              return h('div',{},item.accessType)
                                          })
                                      }
                                  }
                                  return h('div',{},userNameGroup)
                              }
                          },
                          {
                              title: '密码类型',
                              key: 'plugInType',
                              align: 'center',
                              minWidth:150,
                              render:(h,params)=>{
                                  // let k = 0;
                                  // if(k>10){
                                  //     return;
                                  // }
                                  let _this = this;
                                  params = params.row;
                                  let userNameGroup = [];
                                  if(params.accesses){
                                      if(params.accesses.length!=0){
                                          userNameGroup = params.accesses.map((item)=>{
                                              return h('div',{},item.plugInType)
                                          })
                                      }
                                  }
                                  return h('div',{},userNameGroup)
                              }
                          },
  
                      ],
                  },
                  // {
                  //     title:'IP',
                  //     key:'',
                  //     align: 'center',
                  //     sortable: true,
                  //     minWidth:120,
                  //     // "fixed": "left",
                  //     render:(h,params)=>{
                  //         let _this = this;
                  //         let _IPGroup = [];
                  //         params = params.row;
                  //         if(params.addresses){
                  //             _IPGroup = params.addresses.map(item=>{
                  //                 return h('p',{},item.ip)
                  //             })
                  //         }
                  //         return h('div',{},_IPGroup)
                  //     }
                  // },
                  {
                      title:'操作系统类型',
                      key:'sysType',
                      minWidth: 150,
                      align: 'center',
                      filters: [
                              {
                                  label: 'Linux',
                                  value: 'linux'
                              },
                              {
                                  label: 'Windows',
                                  value: 'windows'
                              },
                              {
                                  label: 'Mac',
                                  value: 'mac'
                              },
                              {
                                  label: 'Unix',
                                  value: 'unix'
                              }
                          ],
                      filterMethod (value, row) {
                          // this.virtualSystypeOfReach = value;
                          // this.getVmListManage();
                          return row.sysType ==value;
                      }
                  },
                  {
                      title:'镜像名称',
                      key:'imageName',
                      minWidth: 150,
                      align: 'center'
                  },
                  {
                      title:'主机信息',
                      key:'',
                      align:'center',
                      // minWidth:700,
                      children:[
                          {
                              title:'主机',
                              key:'host',
                              align:'center',
                              minWidth:150,
                          },
                          {
                              title:'主机IP',
                              key:'hostIp',
                              align:'center',
                              sortable: true,
                              minWidth:150,
                          },
                      ]
                  },
                  {
                      title:'资源信息',
                      key:'',
                      align:'center',
                      // minWidth:700,
                      children:[
                          {
                              title:'CPU',
                              key:'cpu',
                              sortable: true,
                              align:'center',
                              minWidth:120,
                          },
                          {
                              title:'DISK(/GB)',
                              key:'disk',
                              sortable: true,
                              align:'center',
                              minWidth:120,
                          },
                          {
                              title:'RAM(/MB)',
                              key:'ram',
                              sortable: true,
                              align:'center',
                              minWidth:120,
                          },
                      ]
                  },
  
                  {
                      title:'虚拟机类型',
                      key:'vmType',
                      minWidth: 100,
                      align: 'center'
                  },
                  {
                      title:'虚拟化类型',
                      key:'vzType',
                      minWidth: 100,
                      align: 'center',
                      filters: [
                          {
                              label: 'kvm',
                              value: 'kvm'
                          },
                          {
                              label: 'docker',
                              value: 'docker'
                          }
                      ],
                      filterMultiple: false,
                      filterMethod (value, row) {
                          if (value == 'kvm') {
                              return row.vzType=="kvm";
                          } else if (value == 'docker') {
                               return row.vzType=="docker";
                          }else{
  
                          }
                      }
                  },
  
                  {
                      title:'创建时间',
                      key:'created',
                      align: 'center',
                      sortable: true,
                      minWidth:150,
                  },
                   {
                      title:'接入',
                      key:'2',
                      align: 'center',
                      width:180,
                      fixed:'right',
                      action:true,
                      placement:'top-right',
                      render:(h,params)=>{
                          // let k = 0;
                          // if(k>10){
                          //     return;
                          // }
                          let _this = this;
                          params = params.row;
                          let accessGroup = [];
                          if(params.accesses){
                              if(params.accesses.length!=0){
                                  accessGroup = params.accesses.map(item=>{
                                      if(item.accessType == 'console'){
                                        return 'console'
                                      }else{
                                        return item.accessType;
                                      }
                                  })
                              }
                          }
                          accessGroup.push("console");
                          function dedupe(array){
                              return Array.from(new Set(array));
                          }
                          accessGroup = dedupe(accessGroup)
                          let SelectGroup = [];
                          SelectGroup = accessGroup.map((element,index)=>{
                              if(index==0){
                                  return;
                              }
                              return h('Option',{
                                  props:{
                                      value:element
                                  }
                              },element)
                          });
                          SelectGroup.unshift(h('Option',{
                              props:{
                                  value:'0'
                              },
                              class:['emptyAccess'],
                              style:{
                                  display:'none'
                              }
                          },''))
                          return h('div',{
                              class:['accessType'],
                          },[
                              h('Icon',{
                                  props:{
                                      type:'md-refresh',
                                  },
                                  attrs:{
                                      title:'刷新接入连接'
                                  },
                                  on:{
                                      click(event){
                                          _this.loadingTable = true
                                          _this.deleteAccessAisle(params.id)
                                      }
                                  },
                                  style:{
                                      fontSize:'20px',
                                      marginRight:'10px',
                                      cursor:'pointer'
                                  },
                              },'')
                              ,
                              h('Button',{
                                  props:{
                                      type:'primary',
                                      'label':'000',
                                       disabled:params.rangeId!=this.selfRange.id
                                      // loading:true
                                  },
                                  // label:'222',
                                  on:{
                                      click(evt){
                                          // var event = event || window.event
                                          // e = window.event || even;
                                          // target = event.target || event.srcElement;
                                          let e = window.event || evt;
                                          // var e = evt.srcElement || evt.target;
                                          // e = window.event || arguments.callee.caller.arguments[0];
                                          // let versonGroup = [];
                                          // if(!event.toElement){
  
                                          // }
                                          // event.toElement = e.toElement || event.relatedTarget
                                          _this.selectDataGroup = [];
                                          _this.accessVmType = e.srcElement.innerText;
                                          _this.accessVmId = params.id;
                                          _this.accessVmName = params.name;
                                          _this.accessVmIp = '';
                                          _this.accessSubnetId = params.addresses[0].ips[0].subnetId;
                                          let addresses = params.addresses || []
                                          for (let index = 0; index < addresses.length; index++) {
                                              if(addresses[index].version==4){
                                                  _this.selectDataGroup.push(addresses[index])
                                              }
                                          }
                                          if(_this.selectDataGroup.length>1){
                                              if(e.srcElement.innerText=="ssh"||e.srcElement.innerText=="rdp"){
                                                  _this.selectDataPanel = true;
                                              }else{
                                                  _this.vmAccess(params,e.srcElement.innerText)
                                              }
                                          }else{
                                            //   _this.loadingTable = true;
                                              _this.vmAccess(params,e.srcElement.innerText)
                                          }
                                      }
                                  },
                                  style:{
                                      borderRadius:'4px 0px 0px 4px',
                                  },
                              },accessGroup[0]),
                              h('Select',{
                                  props:{
                                      placeholder:'',
                                      transfer:true,
                                      disabled:accessGroup.length == 1||params.rangeId!=this.selfRange.id
                                  },
                                  style:{
                                      width:'20px'
                                  },
                                  on:{
                                      'on-change':(value)=>{
                                          $('.emptyAccess').click();
                                          if(value!=0){
                                              _this.vmAccess(params,value)
                                          }
                                          $('.accessType .ivu-select-placeholder').text("")
                                      }
                                  }
                              },SelectGroup)
                          ])
  
                      }
                  },
                   {
                      title:'操作',
                      key:'',
                      align: 'center',
                      minWidth:130,
                      fixed:'right',
                      action:true,
                      placement:'top-right',
                      render:(h,params)=>{
                          // let k = 0;
                          // if(k>10){
                          //     return;
                          // }
                          let _this = this;
                          params = params.row;
                          // let statusVm = params.status;
                          let statusVm ="";
                          if(_this.vmGroupStatus.length!=0){
                              _this.vmGroupStatus.forEach(element => {
                                  if(element.id==params.id){
                                      if(element.enableCrash){
                                          statusVm = "MELT"
                                      }else{
                                          statusVm =  element.status;
                                          //  statusVm = "MELT"
                                      }
                                  }
                              });
                          }
  
                          // let statusVm = _this.vmGroupStatus[_this.vmIdGroupStatus.findIndex(params.id)]
                          let operationGroup = [];
                          let operationOption = [];
                          let arr = []
                          if (this.optionConfig.show) {
                              arr = this.getoption()
                          }
                      
                          switch (statusVm) {
                              case "ACTIVE":
                                  operationGroup = ["关机", "重启", "重置", "挂起", "暂停", "密码","下发用户数据"]
                                  if (arr.length > 0) {
                                      operationGroup.push(...arr);
                                  }
                                  break;
                              case "Running":
                                  operationGroup = ["关机", "重启", "重置", "挂起", "暂停", "密码"]
                                  if (arr.length > 0) {
                                      operationGroup.push(...arr);
                                  }
                                  break;
                              case "SHUTOFF":
                                  operationGroup = ["开机", "重置", "密码"]
                                  if (arr.length > 0) {
                                      operationGroup.push(...arr);
                                  }
                                  break;
                              case "DOWN":
                                  operationGroup = ["开机", "重置"]
                                  break;
                              case "Stopped":
                                  operationGroup = ["开机", "重置"]
                                  break;
                              case "SUSPENDED":
                                  operationGroup = ["恢复", "密码"]
                                  if (arr.length > 0) {
                                      operationGroup.push(...arr);
                                  }
                                  break;
                              case "ERROR":
                                  operationGroup = ["重启", "重置状态"]
                                  break;
                              case "PAUSED":
                                  operationGroup = ["取消暂停", "密码"]
                                  if (arr.length > 0) {
                                      operationGroup.push(...arr);
                                  }
                                  break;
                              case "CRUSH"://虚拟机奔溃状态
                                  operationGroup = ["关机", "重启"]
                                  break;
                              case "PASSWORD"://虚拟机未知状态
                                  operationGroup = ["关机"]
                                  break;
                              case "MELT"://虚拟机奔溃状态
                                  operationGroup = ["重启", "重置"]
                                  break;
                              default:
                                  operationGroup = ["关机"]
                                  break;
                          }
  
  //                      operationGroup.unshift("操作")
                          operationOption = operationGroup.map((item,index)=>{
                              if(index==0){
                                  return h('Option',{props:{value:0,label:0},class:['falseValue'+params.id],style:{display:'none'}},'')
                              }else{
                                  return h('Option',{props:{value:item}},item)
                              }
                          })
                          return h('div',{
                              class:['opertionVm'],
                          },[h('Button',{
                               props:{
                                  type:'primary',
                                  disabled:params.rangeId!=this.selfRange.id
  
                              },
                              on:{
                                  click(event){
                                      //window.open("/TopoLeftFeatures/index.html#/vmHardwareCollectInfo?vmId="+params.id+'&projectId='+_this.currentProjectId);
                                      // _this.vmSwitchTypeOperation(params.id,event.toElement.innerText)
                                      let value = operationGroup[0];
                                      if(value=="密码"||value=="元数据"||value=="端口转发"){
                                          _this.vmSwitchTypeOperation(params.id,value,params)
                                      }else{
  //                                  	_this.vmSwitchTypeOperation(params.id,value,params)
                                        _this.opVm = params;
                                        _this.opVmType = value;
                                        _this.vmOpModal.show = true;
                                        _this.vmOpModal.content = `确认对该虚拟机进行[${value}]操作吗?`;
                                      }
                                  }
                              },
                              style:{
                                  borderRadius:'4px 0px 0px 4px'
                              },
                          },operationGroup[0]),h('Select',{
                              props:{
                                  placeholder:'',
                                  value:0,
                                  transfer:true,
                                  disabled:operationGroup.length == 1||params.rangeId!=this.selfRange.id
                                  // 'v-model':,
                              },
                              style:{
                                  width:'20px'
                              },
                              class:['ssssssssss'],
                              on:{
                                  'on-change':(value)=>{
                                      if(value!=0){
                                          if(value=="密码"||value=="元数据"||value=="端口转发"){
                                              _this.vmSwitchTypeOperation(params.id,value,params)
                                          }else if(value == "工具库"){
                                            // let currentSubnetId = params.addresses[0].ips[0].subnetId;
                                            // this.$refs.toolModal.showModal(currentSubnetId);
                                          }else{
  //                                      	_this.vmSwitchTypeOperation(params.id,value,params)
  //                                          _this.$Modal.confirm({
  //                                              title:"操作虚拟机",
  //                                              content:"您确定要对这台虚拟机"+value+'吗？',
  //                                              onOk:()=>{
  //                                                  _this.vmSwitchTypeOperation(params.id,value,params)
  //                                              },
  //                                              onCancel:()=>{
  //
  //                                              }
  //                                          })
                                            _this.opVm = params;
                                            _this.opVmType = value;
                                            _this.vmOpModal.show = true;
                                            _this.vmOpModal.content = `确认对该虚拟机进行[${value}]操作吗?`;
                                          }
                                      }
                                      $('.falseValue'+params.id).click();
                                      // $('.ssssssssss').val(0)
                                      // _this.$nextTick(()=>{
                                      //     $('.falseValue').click();
                                      // })
  
                                      // _this.selectValue = '';
                                       $('.opertionVm .ivu-select-placeholder').text("");
                                      // $('.falseValue').click();
                                  },
                              }
                          },operationOption)])
  
                      }
  
                  },
                  {
                      title:'虚拟机状态',
                      key:'status',
                      align: 'center',
                      minWidth:130,
                      fixed:'right',
                      placement:'top-right',
                      render:(h,params)=>{
                          // let k = 0;
                          // k++;
                          // if(k>this.vmListDataTable.length){
                          //     return;
                          // }
                          let _this = this;
                          params  = params.row;
                          let statusVm ="",fontColor = "",statusLoading = false,ErrorMesage = "";
                          if(_this.vmGroupStatus.length!=0){
                              $.each(_this.vmGroupStatus,function(i,element){
                                  if(element.id==params.id){
                                      if(element.enableCrash){
                                          statusVm  =  "MELT";
                                          ErrorMesage = element.crashMsg;
                                      }else{
                                          statusVm  =  element.status;
                                          ErrorMesage = "";
                                          // statusVm  =  "MELT";
                                      }
                                      statusLoading = element.loading;
                                      return;
                                  }
                              })
                              // _this.vmGroupStatus.forEach(element => {
                              //     if(element.id==params.id){
                              //         statusVm  =  element.status;
                              //         statusLoading = element.loading
                              //     }
                              // });
                          }
                          // let statusVmGroup = [
                          //     {'ACTIVE':'运行中/#43CD80/false'},{'Running':'运行中/#43CD80/false'},{'SHUTOFF':'已关机/#f00/false'},
                          //     {'DOWN':'已关机/#f00/false'},{'Stopped':'已停止/#f00/false'},{'SUSPENDED':'已挂起/#f00/false'},
                          //     {'ERROR':'运行ERROR/#f00/false'},{'PAUSED':'已暂停/#43CD80/false'},{'CRUSH':'运行ERROR/#f00/false'},
                          //     {'UNKNOWN':'运行ERROR/#f00/false'},{'powering-off':'关机中/#57a3f3/true'},{'powering-on':'启动中/#57a3f3/true'},
                          //     {'rebuilding':'重置中/#57a3f3/true'},{'rebooting-hard':'重启中/#57a3f3/true'},{'supending':'挂起中/#57a3f3/true'},
                          //     {'resuming':'恢复中/#57a3f3/true'},{'pausing':'暂停中/#57a3f3/true'},{'unpausing':'启动中/#57a3f3/true'},
                          // ]
                        //   let statusVmGroup = {
                        //       'ACTIVE':'运行中/#43CD80/false/alRunning.png','Running':'运行中/#43CD80/false/alRunning.png','SHUTOFF':'已关机/#f00/false/alOff.png',
                        //       'DOWN':'已关机/#f00/false/alOff.png','Stopped':'已停止/#f00/false/alStop.png','SUSPENDED':'已挂起/#f00/false/alSuspend.png',
                        //       'ERROR':'运行ERROR/#f00/false/runningError.png','PAUSED':'已暂停/#43CD80/false/alPause.png','CRUSH':'运行ERROR/#f00/false/runningError.png',
                        //       'UNKNOWN':'运行ERROR/#f00/false/runningError.png','powering-off':'关机中/#57a3f3/true','powering-on':'启动中/#57a3f3/true',
                        //       'rebuilding':'重置中/#57a3f3/true','rebooting_hard':'重启中/#57a3f3/true','suspending':'挂起中/#57a3f3/true',
                        //       'resuming':'恢复中/#57a3f3/true','pausing':'暂停中/#57a3f3/true','unpausing':'启动中/#57a3f3/true',
                        //       'MELT':'已崩溃/#f00/false/runningError.png'
                        //   }
                          let statusVmGroup = {
                              'ACTIVE':'运行中/var(--status-ing)/false/alRunning.png',
                              'Running':'运行中/var(--status-ing)/false/alRunning.png',
                              'SHUTOFF':'已关机/var(--status-deling)/false/alOff.png',
                              'DOWN':'已关机/var(--status-deling)/false/alOff.png',
                              'Stopped':'已停止/var(--status-deling)/false/alStop.png',
                              'SUSPENDED':'已挂起/var(--status-deling)/false/alSuspend.png',
                              'ERROR':'运行ERROR/var(--status-no)/var(--status-no)/runningError.png',
                              'PAUSED':'已暂停/var(--status-suspend)/false/alPause.png','CRUSH':'运行ERROR/var(--status-no)/false/runningError.png',
                              'UNKNOWN':'运行ERROR/var(--status-no)/false/runningError.png',
                              'powering-off':'关机中/var(--status-deling)/true','powering-on':'启动中/var(--status-ing)/true',
                              'rebuilding':'重置中/var(--status-ing)/true',
                              'rebooting_hard':'重启中/var(--status-ing)/true',
                              'suspending':'挂起中/var(--status-ing)/true',
                              'resuming':'恢复中/var(--status-ing)/true',
                              'pausing':'暂停中/var(--status-suspend)/true',
                              'unpausing':'启动中/var(--status-ing)/#57a3f3/true',
                              'MELT':'已崩溃/var(--status-no)/false/runningError.png'
                          }
                          if(!statusVmGroup[statusVm]){
                              statusVmGroup[statusVm] = "加载中/var(--default-color)/true"
                          }
                          let _iamgeName = statusVmGroup[statusVm].split('/')[2]=='false'?'./static/'+statusVmGroup[statusVm].split('/')[3] :'';
  
                          // let _loading = statusVmGroup[statusVm].split('/')[2] =="false" ? false :true;
                          return h('div',{
                              style:{
                                  color:statusVmGroup[statusVm].split('/')[1]
                              }
                          },[h('Button',{
                              props:{
                                  type:'default',
                                  // color:'default',
                                  loading:statusVmGroup[statusVm].split('/')[2] =="false" ? false :true
                                  // loading:false
                              },
                              attrs:{
                                  title:ErrorMesage,
                              }
                          },[
  //                      	h('Img',{
  //                      	    attrs:{src:_iamgeName},
  //	                        	style:{
  //	                        		position:'relative',
  //	                        		bottom:'1px',
  //	                        		right:'8px'
  //	                        	}
  //                      	}),
                            h('span',{
                              style:{
                                color:statusVmGroup[statusVm].split('/')[1]
                              }
                            },
                              statusVmGroup[statusVm].split('/')[0])
                            ])
                          ])
                      }
                  },
              ],
              vmListDataTable:[],
              tableHeight:'',
              virtualNameOfReach:'',
              virtualIPOfReach:'',
              subnetId: '',
              equipmentId: '',
              virtualSystypeOfReach:'',
              virtualKeyOfReach:'',
              virtualValueOfReach:'',
              virtualvmTypeOfReach:'',
              virtualMacOfReach:'',
              virtualImageNameOfReach:'',
              virtualNetworkIdOfReach:'',
              virtualSegmentIdOfReach:'',
              virtualSubnetIdOfReach:'',
              vmKeys:[],
              vmValues:[],
              vmIdGroupStatus:[],
              vmGroupStatus:[],
              vmPassword:'',
              vmId_:'',
              updatePasswordLoading:true,
              tableListHeight:'',
              selectValue:'',
              vmAttributeData:[],
              selectTableDataGroup:[],
              btnData:[],
              setTimeClear:'',
  
              portListPanel:false,
              portTableCloums:[
                  {
                      title:'forwardIP',
                      key:'forwardIp',
                      align:'center'
                  },
                  {
                      title:'forwardPort',
                      key:'forwardPort',
                      align:'center'
  
                  },
                  // {
                  //     title:'vmName',
                  //     key:'name',
                  //     align:'center'
                  // },
                  {
                      title:'vmIP',
                      key:'vmIp',
                      align:'center'
                  },
                  {
                      title:'vmPort',
                      key:'vmPort',
                      align:'center'
                  },
  
                  {
                      title:'type',
                      key:'type',
                      align:'center'
                  },
                  {
                      title:'protocal',
                      key:'protocal',
                      align:'center'
                  },
                  {
                      title:'lastExpireTime',
                      key:'lastExpireTime',
                      align:'center'
                  },
                  {
                      title:'createName',
                      key:'userName',
                      align:'center'
                  },
                  {
                      title:'actions',
                      key:'actions',
                      // align:'center',
                      render:(h,params)=>{
                          let _this = this;
                          params = params.row;
                          return h('Poptip',{
                              style:{
  
                              },
                              props:{
                                  confirm:true,
                                  title:"您确定要删除吗？",
                              },
                              on:{
                                  'on-ok':()=>{
                                      _this.deleteVmPort(params.token)
                                  },
                                  'on-cancel':()=>{
  
                                  }
                              }
                          },[h('Button',{
                              style:{
                                  margin:'5px'
                              },
                              props:{
                                  type:'error'
                              },
                          },'删除')])
                      }
                  }
              ],
              portTableData:[],
              openPort:false,
              addPortLoading:true,
              formValidate: {
                  type: 'ssh',
                  port:22,
                  protocol: 'tcp',
                  customType:'customType',
              },
              ruleValidate: {
                  type: [
                      { required: true, message: '请选择类型', trigger: 'change' }
                  ],
                  port: [
                      { required: true, message: '请填写端口', trigger: 'change',type:'number'},
                  ],
                  protocol: [
                       { required: true, message: '请选择协议', trigger: 'change' }
                  ],
                  customType: [
                       { required: true, message: '请输入自定义类型', trigger: 'change' }
                  ]
              },
              disabledType:false,
              disabledprototol:true,
              accessTokenRef :'',
              setTimeoutReach:'',
              networkData:[],
              subnetData:[],
              segmentsData:[],
              refreshIndex:0,
              vmNetworkData:[],
              controlSearchBtn:false,
              controlSearchText:'更多',
              controlSearchImage:'ios-more',
              //接入方式增加选择面板
              selectDataPanel:false,
              selectDataGroup:[],
              selectDataPanelLoading:true,
              accessVmIp:'',
              accessVmId:'',
              accessVmType:'',
              passwordModal:{
                loading:true,
                show:false
              },
              vmOpModal:{
                loading:true,
                show:false,
                content:''
              },
              selfRange:{},
              successMessage: true, // 用户下发提示
          }
      },
      created () {
          this.getDictInfoByName() // 获取运维配置显示隐藏环境选项 
          if (this.batch) {
              this.vmColumnsData.unshift({
                  type: 'selection',
                  width: 60,
                  align: 'center',
                  "fixed": "left",
              })
          }
          this.userName = localStorage.nickName
          this.currentProjectId = this.$route.query.prjid
  //      this.tableHeight = $(window).height() - 262 ;
  
          // this.currentProjectId = 'cd8ced77c2104b8897ad0fd70bfd7dff';
          this.queryAllRange()
          this.getVmListManage();
          // this.getVmAttributeKey();
          this.getProjectInformation()
  
      },
      methods:{
        // 批量下发用户数据
        BatchUser(){
            let _this = this;
            // console.log('==',_this.$refs);
            if(this.selectTableDataGroup.length == 0){
                this.$Message.warning('请选择要操作的行');
            }else{ 
              this.selectTableDataGroup.forEach(async (item)=>{
                await _this.getprojsubnetNodes(item.id,item.name,item)
                _this.$refs.selection1.selectAll(false);
              })
              // 在循环结束后根据 successMessage 的值进行提示
                if (this.successMessage) {
                  this.$Message.info('操作成功');
                } else {
                  this.$Message.warning('操作失败');
                }
            }
        },
          queryAllRange(){
              queryAllRange().then(res=>{
                //   console.log(res);
                  if(res.code==1){
                      let rangelist=res.data
                      this.selfRange=rangelist.find((item=>{
                          if(item.self=='0'){
                              return item
                          }
                      }))
                    //   console.log(this.selfRange,'this.selfRangethis.selfRange');
                  } else{
                      this.$Message.warning(res.message)
                  }
              })
          },
          // 批量开关机
          async batchOnOff(flag) {
              let action
              let message
              if (flag === 1) { // 开机
                  action = 'os-start'
                  message = '批量开机'
              } else { // 关机
                  action = 'os-stop'
                  message = '批量关机'
              }
              const selection = this.$refs['selection1'].getSelection()
              if (selection.length === 0) {
                  this.$Message.warning('请选择要操作的虚拟机')
                  return
              }
              let activeFunction = selection.map(element=>{
                  let vmId = element.id;
                  return new Promise((resolve,reject)=>{
                      opVms(vmId,action).then(data => {
                          if(data.code == 1){
                              resolve()
                          }else{
                              reject()
                          }
                      }).catch(error =>{
                          reject()
                      })
                  });
              });
              Promise.all(activeFunction).then(()=>{
                  this.$Message.info(`${message}成功`)
                  this.getVmListManage();
              }).catch(error => {
                  this.$Message.warning(`${message}失败`)
              })
          },
          changeIpAccess(value){
              this.accessVmIp = value;
          },
          vmAccessChage(){
              if(!this.accessVmIp){
                  this.$Message.info("请选择一个IP")
                  this.selectDataPanelLoading = false;
                  this.$nextTick(()=>{
                      this.selectDataPanelLoading = true;
                  })
                  return;
              }
              let _this = this;
              let href = _this.$router.resolve({
                name:'toolMachine',
                query:{
                    prjId:_this.currentProjectId,
                    currentSubnetId:_this.accessSubnetId ,
                    vmName:_this.accessVmName,
                    vmId:_this.accessVmId,
                    type: _this.accessVmType,
                    vmIp:_this.accessVmIp
                }
            }).href;
            _this.selectDataPanelLoading = false;
            _this.$nextTick(()=>{
                _this.selectDataPanelLoading = true;
            })
            return
            window.open(href, '_blank');
              axios({
                  url:'netns/access/'+ this.accessVmId+'/'+this.accessVmType,
                  method:'POST',
                  data:{
                      "ip": this.accessVmIp,
                  }
              }).then(function(response){
                  if(response.code==1){
                      // var urls = data.attribute.url;
                      _this.accessTokenRef = response.attribute.token
                      window.open(response.attribute.url+'&Authorization='+cookieUse.getCookie('desig-token'))
                      _this.selectDataPanelLoading = false;
                      _this.$nextTick(()=>{
                          _this.selectDataPanelLoading = true;
                      })
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable: true,duration: 10})
                      _this.selectDataPanelLoading = false;
                      _this.$nextTick(()=>{
                          _this.selectDataPanelLoading = true;
                      })
                  }
              })
          },
          controlSearch(){
              if(this.controlSearchBtn){
                  this.controlSearchText = '更多'
                  this.controlSearchImage = 'ios-more'
              }else{
                  this.controlSearchText = '收起'
                  this.controlSearchImage = 'ios-arrow-up'
              }
              this.controlSearchBtn = !this.controlSearchBtn
          },
          getAccountInfo(){
              let _this = this;
              axios({
                  url: '/identity/account/info',
                  method: 'get'
                  }).then(function (response) {
                  if(response.code != '1'){
                      _this.$Message.warning(response.message);
                  }else{
                      let data = response.data;
                      _this.oUserName = data.nickname;
                      if(data.avatar){
                          _this.$refs.img_user.src=data.avatar;
                      }
                  }
              });
          },
          openPortPanel(){
              this.$refs['formValidate'].resetFields()
              this.openPort = true;
              this.formValidate.type = 'ssh'
              this.formValidate.port = 22
              this.formValidate.protocol = 'tcp'
              this.disabledType = false;
          },
          addPort(){
              let _this = this;
              this.$refs['formValidate'].validate((valid) => {
                  if (valid) {
                      _this.formValidate.type = _this.formValidate.type =="other" ? _this.formValidate.customType :_this.formValidate.type
                      axios({
                          url:'/netns/access/'+_this.vmId_+'/'+_this.formValidate.type,
                          method:'post',
                          data:{
                              "port": _this.formValidate.port,
                              "protocal": _this.formValidate.protocol,
                              "enablePortForward":true
                          }
                      }).then((response)=>{
                          if(response.code==1){
                              _this.reachVmPortsList(_this.vmId_)
                              _this.openPort = false;
                              _this.addPortLoading = false;
                              _this.$nextTick(() => {
                                  _this.addPortLoading = true;
                              });
  
                          }else{
                              _this.$Message.error(response.prompt || response.message)
                              _this.addPortLoading = false;
                              _this.$nextTick(() => {
                                  _this.addPortLoading = true;
                              });
                          }
                      })
                  } else {
                      _this.addPortLoading = false;
                      _this.$nextTick(() => {
                          _this.addPortLoading = true;
                      });
                  }
              });
          },
          getProjectInformation(){
              let _this = this;
              axios({
                  url:"topo/project/"+_this.currentProjectId
              }).then(function(response){
                  if(response.code==1){
                      _this.projectName = response.attribute.project.projectname;
                  }else{
                      let message = response.prompt || response.message
                      _this.$Message.warning(message)
                  }
              })
          },
          cancel(){
  
          },
          SaveMetaData(){
              this.updateVmMetadata(this.vmId_)
          },
          removeMetadata(index){
              this.metadataData.splice(index,1)
              // alert(index)
          },
          handleAddMetadata(){
              this.metadataData.push({
                  key:'',
                  value:'',
              })
          },
          switchineVmCurrentPage(currentPage){
              this.vmCurrentPage = currentPage;
              this.getVmListManage();
              this.selectTableDataGroup = [];
          },
          switchVmItemPage(itemPage){
              this.vmItemPage = itemPage;
              this.getVmListManage();
              this.selectTableDataGroup = [];
          },
          getVmListManage(){
              this.refreshIndex = 0;
              let _this = this;
              _this.loadingTable = true;
              let params = {
                projectId:_this.currentProjectId,
                pageIndex:_this.vmCurrentPage,
                  pageSize:_this.vmItemPage,
                  sortBy:'name',
                  order:'asc',
              }
              if(_this.virtualNameOfReach){
                params.name = _this.virtualNameOfReach;
              }
              if(_this.virtualSystypeOfReach){
                params.sysType = _this.virtualSystypeOfReach;
              }
              if(_this.virtualvmTypeOfReach){
                params.vmType = _this.virtualvmTypeOfReach;
              }
              if(_this.virtualIPOfReach){
                params.ipAddress = _this.virtualIPOfReach;
              }
              if(_this.subnetId){
                  params.subnetId = _this.subnetId;
              }
              if(_this.equipmentId){
                  params.id = _this.equipmentId;
              }
              if(_this.virtualMacOfReach){
                params.macAddress = _this.virtualMacOfReach;
              }
              if(_this.virtualImageNameOfReach){
                params.imageName = _this.virtualImageNameOfReach;
              }
              if(_this.virtualNetworkIdOfReach){
                params.networkId = _this.virtualNetworkIdOfReach;
              }
              axios({
                  url:'topo/deployed/vms',
                  method:'get',
                  params:params
              }).then(function(response){
                  if(response.code==1){
                      _this.vmIdGroupStatus = [];
                      _this.vmTotal = response.data.total;
                      _this.vmListDataTable = response.data.items;
                      // _this.vmListDataTable =  response.data.list.map(item=>{
                      //     item['_loading'] = false;
                      //     return item;
                      // });
                      if(_this.selectTableDataGroup.length >0){
                        _this.vmListDataTable.forEach((item) => {
                            let selectIds = _this.selectTableDataGroup.map(select => select.id);
                            item._checked = selectIds.includes(item.id);
                        });
                      }
                      _this.vmIdGroupStatus =  response.data.items.map(item=>{
                          return item.id
                      });
                      // _this.loadingTable = false
                      if(_this.vmIdGroupStatus.length!=0){
                          _this.reachManyVmStatus(_this.vmIdGroupStatus);
                      }
                      _this.loadingTable = false;
                  }else{
                      if(response.code!=-2){
                          _this.$Message.error(response.message)
                      }
                      _this.loadingTable = false;
                  }
              })
          },
          vmAccess(vm,accessType){
            let {id,name,addresses} = vm;
            let href = this.$router.resolve({
                name:'toolMachine',
                query:{
                    prjId:this.currentProjectId,
                    currentSubnetId:addresses[0].ips[0].subnetId,
                    vmName:name,
                    vmId:id,
                    type: accessType
                }
            }).href;
            window.open(href, '_blank');
            return
              let _this = this;
              axios({
                  url:'netns/access/'+vmId+'/'+accessType,
                  method:'POST',
                  data:{
  
                  }
              }).then(function(response){
                  if(response.code==1){
                      // var urls = data.attribute.url;
                      _this.accessTokenRef = response.attribute.token
                      window.open(response.attribute.url+'&Authorization='+cookieUse.getCookie('desig-token')+'&useIn=newTool');
                      _this.loadingTable = false;
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable: true,duration: 10})
                      _this.loadingTable = false;
                  }
              })
          },
          //操作网络
          operationVm(vmId,action,batch){
              let _this = this;
              return axios({
                  url:'remote/servers/'+vmId+'/action/'+action,
                  method:'POST'
              }).then(function(response){
                  if(response.code==1){
                      _this.$Message.info('操作成功');
                      if(batch){
                          // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                      }else{
                          _this.reachManyVmStatusSend(_this.vmIdGroupStatus)
                      }
                  }else{
                      let message = response.prompt || response.message
                      _this.$Message.warning(message)
                  }
                  _this.vmOpModal.show = false
              })
          },
          //重置
          rebuildVm(vmId,batch){
              let _this = this;
              return axios({
                  url:'remote/servers/'+vmId+'/rebuild',
                  method:'POST'
              }).then(function(response){
                  if(response.code==1){
                      _this.$Message.info('操作成功');
                      if(batch){
                      //    _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                      }else{
                          _this.reachManyVmStatusSend(_this.vmIdGroupStatus)
                      }
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable: true,duration: 10})
                  }
                  _this.vmOpModal.show = false
              })
          },
          //重启
          rebootVm(vmId,batch){
              let _this = this;
              return axios({
                  url:'remote/servers/'+vmId+'/reboot?type=HARD',
                  method:'POST'
              }).then(function(response){
                  if(response.code==1){
                      _this.$Message.info('操作成功');
                      if(batch){
                          // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                      }else{
                          _this.reachManyVmStatusSend(_this.vmIdGroupStatus)
                      }
  
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable: true,duration: 10})
                  }
                  _this.vmOpModal.show = false
              })
          },
          getprojsubnetNodes(vmId,name,itemData,flag = false){
            getprojsubnetNodes(this.$route.query.prjid,vmId).then(res=>{
                if(res.code ==1){
                    let userdata = res.attribute.result.data.userdata
                    this.executeScriptAgain(vmId,userdata,name,itemData,flag)
                }else{
                    this.$Message.warning('操作失败')
                }
            }).catch(error=>{
                console.log(error);
            })
          },
          executeScriptAgain(vmId,userdata,name,itemData,flag){
            let data = [{
                content : encode(userdata),
                deviceId : vmId,
                metadata :{},
                name :name,
                projectId: this.$route.query.prjid,
                ready: true
            }]
            executeScriptAgain(data).then(res=>{
                if(res.code == 1){
                    // console.log('===',res.data);
                    this.successMessage = true
                    if(flag){
                        this.$Message.info('操作成功')
                    }
                }else{
                    this.successMessage = false
                    if(flag){
                        this.$Message.warning('操作失败')
                    }
                }
            }).catch(error=>{
                this.successMessage = false
                console.log(error);
            })
          },
          vmSwitchTypeOp(){
            let vmId = this.opVm.id;
            let text = this.opVmType;
            let name = this.opVm.name
            let batch = '';
            let _this = this;
            switch (text) {
                  case "关机":
                      _this.operationVm(vmId,'os-stop',batch)
                      break;
                  case "开机":
                      _this.operationVm(vmId,'os-start',batch)
                      break;
                  case "重置状态":
                      _this.operationVm(vmId,'reset-state-active',batch)
                      break;
                  case "重启":
                      _this.rebootVm(vmId,batch)
                      break;
                  case "重置":
                      _this.rebuildVm(vmId,batch)
                      break;
                  case "挂起":
                      _this.operationVm(vmId,'suspend',batch)
                      break;
                  case "暂停":
                      _this.operationVm(vmId,'pause',batch)
                      break;
                  case "恢复":
                      _this.operationVm(vmId,'resume',batch)
                      break;
                  case "取消暂停":
                      _this.operationVm(vmId,'unpause',batch)
                      break;
                  case "下发用户数据":
                    this.getprojsubnetNodes(vmId,name,this.opVm,true)
                      break;
              }
          },
          vmSwitchTypeOperation(vmId,text,params='',batch=''){
              let _this = this;
              switch (text) {
                  case "关机":
                      _this.operationVm(vmId,'os-stop',batch)
                      break;
                  case "开机":
                      _this.operationVm(vmId,'os-start',batch)
                      break;
                  case "重置状态":
                      _this.operationVm(vmId,'reset-state-active',batch)
                      break;
                  case "重启":
                      _this.rebootVm(vmId,batch)
                      break;
                  case "重置":
                      _this.rebuildVm(vmId,batch)
                      break;
                  case "挂起":
                      _this.operationVm(vmId,'suspend',batch)
                      break;
                  case "暂停":
                      _this.operationVm(vmId,'pause',batch)
                      break;
                  case "恢复":
                      _this.operationVm(vmId,'resume',batch)
                      break;
                  case "取消暂停":
                      _this.operationVm(vmId,'unpause',batch)
                      break;
                  case "密码":
                      _this.vmId_ = params.id;
                      _this.vmPassword = "";
                      this.currentVm = params
                      _this.passwordModal.show = true;
                      return;
                  case "元数据":
                      _this.vmMetadata = true;
  
                      _this.metadataData = [
                          {
                              key:'',
                              value:''
                          }
                      ]
                      _this.reachVmMetaData(params.id)
                      _this.vmName = params.name;
                      _this.vmId_ = params.id;
                      break;
                  case "端口转发":
                      _this.vmName = params.name
                      _this.vmId_ = params.id;
                      _this.portTableData = [];
                      _this.portListPanel = true;
                      _this.reachVmPortsList(params.id)
                      break;
                  default:
                      break;
              }
          },
          //查询虚拟机的状态
          reachVmStatus(vmId){
              let _this  =this;
              axios({
                  url:'remote/servers/'+vmId+'/os_status',
  
              }).then(function(response){
                  if(response.code==1){
                      if(response.attribute.vms[0].taskStatus!="null"){
                          _this.reachVmStatus(vmId);
                      }else{
                          _this.getVmListManage()
                          // var status = response.attribute.vms[0].status;
                      }
                  }else{
                      if(response.message){
                          _this.$Message.error({content:response.message,closable:true,duration:10})
                      }else{
                          _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                      }
  
                  }
              })
          },
          //批量查询虚拟机状态
          reachManyVmStatus(vmIdGroup){
              let _this  =this;
              axios({
                  url:'remote/servers/os_status',
                  method:"POST",
                  data:vmIdGroup
              }).then(function(response){
                  if(response.code==1){
                      let status_null = [];
                      let vm_status = "",vm_loading = false;
                      _this.vmGroupStatus = response.attribute.vms.map(item=>{
                          if(item.taskStatus!="null"){
                              status_null.push(item.vmId);
                              vm_status = item.taskStatus
                              vm_loading = true
                          }else{
                              vm_status = item.status
                              vm_loading = false
                          }
                          _this.vmListDataTable.forEach(tableItem=>{
                            if(tableItem.id == item.vmId){
                                if(item.status == 'ACTIVE' || item.status == 'active'){
                                    // tableItem._checked = false
                                    // _this.$set(tableItem,'_checked',false)
                                    _this.$set(tableItem,'_disabled',false)
                                }else{
                                    // tableItem._checked = true
                                    // _this.$set(tableItem,'_checked',true)
                                    _this.$set(tableItem,'_disabled',true)
                                }
                            }
                          })
                          return {
                              id:item.vmId,
                              status:vm_status,
                              loading:vm_loading,
                              enableCrash:item.enableCrash,
                              crashMsg:item.crashMsg ? item.crashMsg  :'',
                          }
                      });
                      if(status_null.length!=0){
                          _this.reachManyVmStatusSend(status_null)
                      }
  
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                  }
              })
          },
          reachManyVmStatusSend(vmIdGroup){
              let _this  =this;
              clearTimeout(_this.setTimeClear)
              axios({
                  url:'remote/servers/os_status',
                  method:"POST",
                  data:vmIdGroup
              }).then(function(response){
                  if(response.code==1){
                      let status_null = [];
                      let status_new = [];
                      let vm_status = "";
                      status_new = response.attribute.vms.map(item=>{
                          if(item.taskStatus!="null"){
                              status_null.push(item.vmId);
                              vm_status = item.taskStatus
                              // return
                          }else{
                              vm_status = item.status
                          }
                          _this.vmListDataTable.forEach(tableItem=>{
                            if(tableItem.id == item.vmId){
                                if(item.status == 'ACTIVE' || item.status == 'active'){
                                    // tableItem._checked = false
                                    // _this.$set(tableItem,'_checked',false)
                                    _this.$set(tableItem,'_disabled',false)
                                }else{
                                    // tableItem._checked = true
                                    // _this.$set(tableItem,'_checked',true)
                                    _this.$set(tableItem,'_disabled',true)
                                }
                            }
                          })
                          return {
                              id:item.vmId,
                              status:vm_status
                          }
                      });
                      _this.vmGroupStatus.forEach(item=>{
                          status_new.forEach(element=>{
                              if(item.id==element.id){
                                  item.status = element.status;
                              }
                          })
                      });
                      if(status_null.length!=0){
                          _this.setTimeClear = setTimeout(() => {
                              _this.reachManyVmStatusSend(status_null)
                          }, 3000);
                      }
  
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                  }
              })
          },
          //批量修改生成随机密码
          updateVmPasswordMany(ele){
              let _this = this;
              let access = ele.accesses[0]
              let data = {
                  id:ele.id,
                  password:_this.getRandomPassword(6),
                  type:access.accessType,
                  username:access.username,
              }
              return axios({
                  url:'remote/servers/'+ele.id+'/change-password',
                  method:'post',
                  data:data,
              }).then(function(response){
                  if(response.code==1){
                      
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10});
                      
                  }
              })
          },
          getRandomPassword(range){
              let str = "",
              // range = 6,
              arr = [
              'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
              'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
              'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z','0', '1', '2', '3', '4', '5', '6', '7', '8', '9',];
              // if (randomFlag) {
              //     range = Math.round(Math.random() * (max - min)) + min;// 任意长度
              // }
              for (let i = 0; i < range; i++) {
                  let pos = Math.round(Math.random() * (arr.length - 1));
                  str += arr[pos];
              }
              return str;
          },
          reachVmMetaData(vmId){
              let _this = this;
              axios({
                  url:'remote/servers/'+vmId+'/metadata',
                  method:'get'
              }).then(function(response){
                  if(response.code==1){
                      _this.metadataData = [];
                      let metadata_ = response.attribute.metadata;
                      if(JSON.stringify(metadata_) == "{}"){
                           _this.metadataData.push({
                                  key:'',
                                  value:''
                              })
                      }else{
                          for(let i in metadata_){
                              _this.metadataData.push({
                                  key:i,
                                  value:metadata_[i]
                              })
                          }
                      }
  
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,duration:10,closable:true})
                  }
              })
          },
          updateVmMetadata(vmId){
              let _this = this;
              let objMedata = {};
              _this.metadataData.forEach(element=>{
                  objMedata[element.key] = element.value;
              });
              axios({
                  url:'remote/servers/'+vmId+'/metadata',
                  method:'put',
                  data:objMedata
              }).then(function(response){
                  if(response.code==1){
                      _this.$Message.success("保存成功");
                      _this.vmMetadata = false;
                      _this.vmMetadataLoading = false;
                      _this.$nextTick(()=>{
                          _this.vmMetadataLoading = true;
                      })
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10});
                      _this.vmMetadataLoading = false;
                      _this.$nextTick(()=>{
                          _this.vmMetadataLoading = true;
                      })
                  }
              })
          },
          deleteVmMetadata(vmId,key){
              let _this = this;
              axios({
                  url:'remote/servers/'+vmId+'/metadata/'+key,
                  method:'delete'
              }).then(function(response){
                  if(response.code==1){
                      // _this.
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                  }
              })
          },
          //查询虚拟机的key
          getVmAttributeKey(value){
              if(!value){
                  return;
              }
              let _this = this;
              axios({
                  url:'topo/topo/'+_this.currentProjectId+'/attribute/tree?type=VM',
              }).then(function(response){
                  if(response.code==1){
                      // _this.vmKeys = []
                      if(response.attribute.result!="{}"){
                          _this.vmAttributeData = Object.keys(response.attribute.result).map(item=>{
                              let oneMenu = [
                                 {
                                      label:'--',
                                      value:'--'
                                 }
                              ];
                              // $.ajax({
                              //     type:"get",
                              //     contentType:"application/json",
                              //     async:false,
                              //     url: _projPath+'topo/'+_this.currentProjectId+"/attribute/key/"+item,
                              //     dataType:"json",
                              //     headers:{"Authorization":localStorage.token},
                              //     success: function (response) {
                              //  	    if(response.attribute.result.length!=0){
                              //             oneMenu = response.attribute.result.map(item=>{
                              //                 return{
                              //                     value:item,
                              //                     label:'value：'+item
                              //                 }
                              //             });
                              //         }
                              //     },
                              //     error: function () {
                              //     },
                              // });
                              return {
                                  value:item,
                                  label:'key：'+item,
                                  children:oneMenu
                              }
                          })
                      }
  
                  }else{
                      if(response.code!=-2){
                          _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                      }
                  }
              })
          },
          //通过key 查找value
          getValueByVmKey(vmAttributeKey){
              let _this = this;
              _this.vmValues = [];
              _this.virtualValueOfReach = "";
              if(!vmAttributeKey){
                  return;
              }
              axios({
                  url:'topo/topo/'+_this.currentProjectId+'/attribute/key/'+vmAttributeKey,
              }).then(function(response){
                  if(response.code==1){
                      if(response.attribute.result.length!=0){
                          _this.vmValues = response.attribute.result;
                      }
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                  }
              })
          },
          listenKeyChange(vmAttributeKey){
              let _this = this;
              // _this.vmValues = [];
              // _this.virtualValueOfReach = "";
              if(!vmAttributeKey){
                  _this.virtualKeyOfReach = "";
                  _this.virtualValueOfReach = "";
                  return;
              }else{
                  if(vmAttributeKey.length==1){
                      _this.virtualKeyOfReach = vmAttributeKey[0];
                      _this.virtualValueOfReach = "";
                      axios({
                          url:'topo/topo/'+_this.currentProjectId+'/attribute/key/'+vmAttributeKey[0],
                      }).then(function(response){
                          if(response.code==1){
                              if(response.attribute.result.length!=0){
                                  // _this.vmValues = response.attribute.result;
                                  for(let i=0;i< _this.vmAttributeData.length;i++){
                                      if(_this.vmAttributeData[i].value==vmAttributeKey[0]){
                                          _this.vmAttributeData[i].children = [];
                                          response.attribute.result.forEach(element=>{
                                              _this.vmAttributeData[i].children.push({
                                                  label:'value：'+element,
                                                  value:element
                                              })
                                          })
                                          return;
                                      }
                                  }
                              }
                          }else{
                              _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                          }
                      });
                  }else{
                      _this.virtualKeyOfReach = vmAttributeKey[0];
                      _this.virtualValueOfReach = vmAttributeKey[1];
                  }
              }
              _this.vmCurrentPage=1;
              _this.getVmListManage();
              // axios({
              //     url:'topo/topo/'+_this.currentProjectId+'/attribute/key/'+vmAttributeKey,
              // }).then(function(response){
              //     if(response.code==1){
              //         if(response.attribute.result.length!=0){
              //             // _this.vmAttributeData.forEach(element=>{
              //             //     if(){
  
              //             //     }
              //             // });
              //             for(let i=0;i<_this.vmAttributeData.length;i++){
              //                 if(_this.vmAttributeData[i].value==vmAttributeKey){
              //                     _this.vmAttributeData[i]['children'] = response.attribute.result.map(item=>{
              //                         return {
              //                             label:item,
              //                             value:item
              //                         }
              //                     });
              //                     return;
              //                 }
              //             }
              //         }
              //     }else{
              //         _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
              //     }
              // })
          },
          opeartionManyVm(){
              let _this = this;
              if(this.selectTableDataGroup.length!=0){
                  // _this.isSpinShow = true
                  _this.loadingTable = true;
                  // let vmGroupStatus = this.selectTableDataGroup.map(item=>{
                  //     return item.status;
                  // });
                  let vmGroupStatus  = [];
                  axios({
                      url:'remote/servers/os_status',
                      method:"POST",
                      data:_this.selectTableDataGroup.map(item=>{return item.id})
                  }).then(function(response){
                      if(response.code==1){
                          let vm_status = "";
                          return vmGroupStatus = response.attribute.vms.map(item=>{
                              if(item.taskStatus!="null"){
                                  vm_status = item.taskStatus
                              }else{
                                  vm_status = item.status
                              }
                              return vm_status
                          });
                      }else{
                           _this.loadingTable =  false;
                          _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
                      }
                  }).then(function(vmGroupStatus){
                      _this.vmManyNumber = vmGroupStatus.length;
                      // vmGroupStatus = new Set(vmGroupStatus);
                      let uniqueArr = [...new Set(vmGroupStatus)];
                       _this.loadingTable =  false;
                      if(uniqueArr.length!=1){
                          _this.$Message.info("您选择的虚拟机中，存在不同状态的虚拟机")
                      }else{
                          _this.vmManyPanel = true;
                          switch (uniqueArr[0]) {
                              case "ACTIVE":
                                  _this.btnData = ["关机","重启","重置","挂起","暂停","修改密码(系统随机生成)"]
                                  break;
                              case "Running":
                                  _this.btnData = ["关机","重启","重置","挂起","暂停","修改密码(系统随机生成)"]
                                  break;
                              case "SHUTOFF":
                                  _this.btnData = ["开机","重置"]
                                  break;
                              case "DOWN":
                                  _this.btnData = ["开机","重置"]
                                  break;
                              case "Stopped":
                                  _this.btnData = ["开机","重置"]
                                  break;
                              case "SUSPENDED":
                                  _this.btnData = ["恢复"]
                                  break;
                              case "ERROR":
                                  _this.btnData = ["重启","重置状态"]
                                  break;
                              case "PAUSED":
                                  _this.btnData = ["取消暂停"]
                                  break;
                              case "CRUSH"://虚拟机奔溃状态
                                  _this.btnData = ["关机","重启"]
                                  break;
                              case "UNKNOWN"://虚拟机未知状态
                                  _this.btnData = []
                                  break;
                              default:
                                  break;
                          }
                      }
                  })
              }else{
                  _this.$Message.info("请选择要操作的虚拟机")
              }
          },
           // 全选
        selectItem (selection, row) {
            if (!row) {
              //全选
              selection.forEach((select) => {
                let selectIds = this.selectTableDataGroup.map(item => item.id);
                if (!selectIds.includes(select.id)) {
                  let index = this.vmListDataTable.findIndex(item => item.id == select.id);
                  if (index != -1) {
                    select._checked = true;
                    this.vmListDataTable[index]._checked = true;
                  }
                  this.selectTableDataGroup.push(select);
                }
              });
            } else {
              let index = this.vmListDataTable.findIndex(item => item.id == row.id);
              if (index != -1) {
                row._checked = true;
                this.vmListDataTable[index]._checked = true;
              }
              this.selectTableDataGroup.push(row);
            }
        },
        removeItem (selection, row) {
            if (!row) { // 全选
              //全选
              this.vmListDataTable.forEach((item) => {
                item._checked = false;
                  this.delSelectItem(item.id);
                });
              } else {
                let selectIndex = this.vmListDataTable.filter(item => item.id == row.id);
                // console.log('===selectIndex',selectIndex);
                let index = this.vmListDataTable.findIndex((items) => items.id === row.id);
                // console.log('🚀 removeItem ~ index:', index)
                if (selectIndex.length > 0) {
                  selectIndex[0]._checked = false;
                }
                this.delSelectItem(row.id);
              }
        },
        delSelectItem (id) {
            let selectIndex = this.selectTableDataGroup.findIndex((items) => items.id === id);
            if (selectIndex >= 0) {
              this.selectTableDataGroup.splice(selectIndex, 1);
            }
        },



          selectTableData(values){
              this.selectTableDataGroup = values
          },
          testFgm(value){
              this.selectTableDataGroup.forEach(element=>{
                  this.vmSwitchTypeOperation(element.id,value,'',true)
              });
          },
          okVm(value){
              let _this = this;
              let activeFunction = [];
              activeFunction = this.selectTableDataGroup.map(element=>{
                  let vmId = element.id;
                  let batch = true;
                  return new Promise((resolve,reject)=>{
                      switch (value) {
                          case "关机":
                              _this.operationVm(vmId,'os-stop',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "开机":
                              _this.operationVm(vmId,'os-start',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "重启":
                              _this.rebootVm(vmId,batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "重置":
                              _this.rebuildVm(vmId,batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "挂起":
                              _this.operationVm(vmId,'suspend',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "暂停":
                              _this.operationVm(vmId,'pause',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "恢复":
                              _this.operationVm(vmId,'resume',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "取消暂停":
                              _this.operationVm(vmId,'unpause',batch).then(()=>{
                                  resolve()
                              })
                              break;
                          case "修改密码(系统随机生成)":
                              _this.updateVmPasswordMany(element).then(()=>{
                                  resolve()
                              })
                              // _this.operationVm(vmId,'unpause',batch).then(()=>{
                              //     resolve()
                              // })
                              break;
                          default:
                              break;
                      }
                  });
                  // return this.vmSwitchTypeOperation(element.id,value,'',true)
              });
              // setTimeout(() => {
              //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
              // }, 1500);
              this.vmManyPanel = false;
              Promise.all(activeFunction).then(()=>{
                  _this.getVmListManage();
                  // _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
              })
              return;
              // let promise = new Promise(()=>{
  
              // }).then((value)=>{
  
              // })
              // let _this = this;
              // let group = [];
              // group = this.selectTableDataGroup.map(element=>{
              //     return _this.vmSwitchTypeOperation(element.id,value,'',true)
              // });
              // let promise = new Promise((resolve, reject) => {
              //     // let i = 0;
              //     this.selectTableDataGroup.forEach((element,index)=>{
              //         // group.push(this.vmSwitchTypeOperation(element.id,value,'',true));
              //         this.vmSwitchTypeOperation(element.id,value,'',true)
              //         // i++;
              //     });
  
              //     resolve();
              //     // if(i==this.selectTableDataGroup.length){
              //     //     resolve();
              //     // }
              // });
              // promise.then((value) => {
              //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
              // }).then(()=>{
              //     this.vmManyPanel = false;
              // });
              // promise.then((value) => {
              //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
              // }).then(()=>{
              //     this.vmManyPanel = false;
              // });
              // this.reachManyVmStatusSend(this.selectTableDataGroup.map(item=>{return item.id}));
          //    setTimeout(() => {
  
          //    }, 2000);
          },
          reachVmPortsList(vmId){
              let _this = this;
              _this.portTableData = [];
              return axios({
                  url:'netns/access/detail?vmId='+vmId,
                  method:'get',
                  // params:{
                  //     vmId:vmId
                  // }
              }).then((response)=>{
                  if(response.code==1){
                      // return response.attribute.result
                      $.each(response.attribute.result.pageData,function(i,item){
                          if(item.forwardIp){
                              _this.portTableData.push(item)
                          }
                      })
                      // _this.portTableData = response.attribute.result.pageData.filter((item)=>{
                      //     return item.forwardIP;
                      // });
                  }else if(response.code==-2){
                      _this.portTableData = [];
                  }else{
                      _this.$Message.error(response.prompt || response.message)
                  }
              })
          },
          deleteVmPort(token){
              let _this = this;
              axios({
                  url:'/netns/access/tokens/'+token,
                  method:'delete'
              }).then((response)=>{
                  if(response.code==1){
                      _this.reachVmPortsList(this.vmId_);
                  }else{
                      _this.$Message.error(response.prompt || response.message)
                  }
              })
          },
          listenTypeChange(value){
              let _this = this;
              _this.disabledprototol = true
              _this.disabledType = true
              switch (value) {
                  case "ssh":
                      _this.formValidate.port = 22
                      _this.formValidate.protocol = "tcp"
                      _this.disabledType = false
                      _this.formValidate.customType = 'test'
                      break;
                  case "rdp":
                      _this.formValidate.port = 3389
                      _this.formValidate.protocol = "tcp"
                      _this.disabledType = false
                      _this.formValidate.customType = 'test'
                      break;
                  case "console":
                      _this.formValidate.port = 5901
                      _this.formValidate.protocol = "tcp"
                      _this.disabledType = false
                      _this.formValidate.customType = 'test'
                      break;
                  case "other":
                      // _this.formValidate.port = 22
                      _this.disabledprototol = false
                      _this.disabledType = true
                      _this.formValidate.port = 1;
                      _this.formValidate.customType = ''
                      break;
                  default:
                      break;
              }
          },
          deleteAccessAisle(vmId){
              let _this = this;
              axios({
                  url:'netns/access/vms/'+vmId,
                  method:'delete'
              }).then((response)=>{
                  if(response.code==1){
                      _this.$Message.success("刷新成功")
                      _this.loadingTable = false;
                  }else{
                      _this.$Message.warning(response.prompt || response.message)
                      _this.loadingTable = false;
                  }
              })
          },
          limitingReach(){
              let _this = this;
              clearTimeout(_this.setTimeoutReach);
              _this.setTimeoutReach = setTimeout(() => {
                  _this.getVmListManage()
              }, 500);
          },
          reachNetworkList(value){
              if(!value){
                  return
              }
              let _this = this;
              axios({
                  url:'topo-edit/topo/project/'+_this.currentProjectId+'/tree',
                  method:'GET',
                  data:"NW",
              }).then(function(response){
                  if(response.code==1){
                      _this.networkData = []
                      let networkDataTree = response.data;
                      function getNetwork(currentNetworkData){
                          _this.networkData.push({
                              networkName:currentNetworkData.name,
                              networkId:currentNetworkData.id
                          })
                          if(currentNetworkData.networks&&currentNetworkData.networks.length!=0){
                              for(let i = 0;i<currentNetworkData.networks.length;i++){
                                  getNetwork(currentNetworkData.networks[i])
                              }
                          }
                      }
                      getNetwork(networkDataTree)
                  }else{
                      _this.$Message.error(response.prompt || response.message)
                  }
              })
          },
          reachSubnetList(value){
              if(!value){
                  return
              }
              let _this = this;
              axios({
  //              url:'deploy/project/subnets?projectId='+_this.currentProjectId+'&page=1&rows=20000',
          url:`topo/deployed/projects/${_this.currentProjectId}/subnets`+'&pageIndex=1&pageSize=20000',
                  method:'GET',
              }).then(function(response){
                  if(response.code==1){
                      _this.subnetData = response.data.items;
                  }else{
                      _this.$Message.error(response.prompt || response.message)
                  }
              })
          },
          reachSegmentList(value){
              if(!value){
                  return
              }
              let _this = this;
              axios({
  //              url:'deploy/project/segments?projectId='+_this.currentProjectId+'&page=1&rows=20000',
          url:`topo/deployed/projects/${_this.currentProjectId}/segments`+'&pageIndex=1&pageSize=20000',
                  method:'GET',
              }).then(function(response){
                  if(response.code==1){
                      _this.segmentsData = response.data.items;
                  }else{
                      _this.$Message.error(response.prompt || response.message)
                  }
              })
          },
          changePassword(){
            let _this = this;
            if(!_this.vmPassword){
                  _this.$Message.info("请填写密码")
                  _this.loading = false;
                  _this.passwordModal.loading = false;
                  setTimeout(() => {
                      _this.passwordModal.loading = true;
                  }, 500);
                  return;
              }
              console.log(this.currentVm)
              let myPromis = this.cloudType !== 'h3c'
              ? axios({
                  url:`remote/servers/${_this.vmId_}/admin-password?pwd=${_this.vmPassword}`,
                  method:'put'
              })
              : axios({
                  url:'remote/servers/'+this.currentVm.id+'/change-password',
                  method:'post',
                  data: {
                      id: this.currentVm.id,
                      password: this.vmPassword,
                      "type": "qga",
                      username: this.currentVm.accesses[0].username,
                  },
              })
            myPromis.then(function(response){
                  if(response.code==1){
                      _this.$Message.success("修改成功")
                      _this.getVmListManage();
                      _this.passwordModal.show = false;
                  }else{
                      _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10});
                  }
                  _this.passwordModal.loading = false;
                  setTimeout(() => {
                      _this.passwordModal.loading = true;
                  }, 500);
              }).catch(error => {
                _this.passwordModal.loading = false;
                  setTimeout(() => {
                      _this.passwordModal.loading = true;
                  }, 500);
              })
          },
          getoption () {
              let arr = []
              if (!this.optionConfig.show) return arr;
          //    let optionConfig = this.optionConfig.env
              if (this.optionConfig.env.metaData == 1) { // 0 去除元数据
                  arr.push('元数据')
              }
              if (this.optionConfig.env.migrate == 1) { // 迁移
                  arr.push('迁移')
              }
              if (this.optionConfig.env.portForward == 1) { //端口转发
                  arr.push('端口转发')
              }
              return arr
          },
      },
      beforeCreate(){
      },
      // created(){
      // },
      beforeMount(){
      },
      mounted(){
          // this.tableListHeight = $('#vmListTable').height();
      },
      beforeUpdate(){
      },
      updated(){
  
          // this.tableListHeight = $('#vmListTable').height();
          // if($('#vmListTable').height()>$(window).height() - 140){
          //     this.tableHeight = $(window).height() - 140
          // }else{
          //     // this.tableHeight = ''
          // }
      },
      beforeDestroy(){
      },
      destroyed(){
      },
      watch:{
          vmListDataTable:{
              handler(newName, oldName){
            //   console.log('🚀 ~ file: environManage.vue:2956 ~ handler ~ newName:', newName)
              },
              immediate: true
          }
      },
  
  }
  
  </script>
  
  <style>
  /* .header{
      width: 100%;
      height: 50px;
      color:#fff;
      background: #4a5a6a;
  }
  .leftP{
      width: 300px;
      line-height: 50px;
      text-align: left;
      padding-left: 20px;
  }
  .rightU{
      width: 300px;
      line-height: 50px;
      text-align: right;
      padding-right: 20px;
  }
  .img_user{
      vertical-align: text-bottom;
      margin-left: 20px;
  } */
  
  
  .headerBtn1{
      text-align: left;
      margin:15px 0;
  }
  .pageStyle1{
      text-align: center;
      margin-top:10px;
  }
  
  
  .operation .ivu-select-arrow{
      right: 2px
  }
  .operation .ivu-select-selection{
      border-radius: 0px 4px 4px 0px !important;
  }
  .accessType .ivu-select-arrow{
      right: 2px
  }
  .accessType .ivu-select-selection{
      border-radius: 0px 4px 4px 0px !important;
  }
  .opertionVm .ivu-select-arrow{
      right: 2px
  }
  .opertionVm .ivu-select-selection{
      border-radius: 0px 4px 4px 0px !important;
  }
  .ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close{
      top: -2px;
  }
  .ivu-table-tip{
      overflow: hidden !important;
  }
  
  
  .expendSpanStyle{
      display: inline-block;
      margin-right: 25px;
      min-width: 300px;
  }
  
  #vmListTable .ivu-table-overflowX{
    overflow: auto;
  }
  .between-page .ivu-page-total{
    margin-right: auto;
  }
  
  /* .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
     from { transform: rotate(0deg);}
     50% { transform: rotate(180deg);}
     to { transform: rotate(360deg);}
  } */
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  /* .ivu-spin-fix {
      position: fixed;
  } */
  </style>
  